<template>
    <!-- 自定义底部栏 -->
    <view>
        <view class="tabbar-panel">
            <view
                v-for="(item, index) in bottomMenus"
                :key="index"
                class="tabbar-item"
                :style="{
                    '--color': indexNav == index ? (customColor !== '' ? customColor : globalColor) : '',
                    minHeight: `calc(98rpx + ${BottomBlackLineHeight})`
                }"
                @click="tabNav(index, item)"
            >
                <view class="tabbar-img">
                    <text v-if="item.menu_unselected_icon" class="iconMulti newShopIcon">
                        {{ item.menu_unselected_icon }}
                    </text>
                    <view v-else class="img-box">
                        <image
                            style="width: 45rpx"
                            :src="indexNav == index ? item.selectedIconPath : item.iconPath"
                            mode="widthFix"
                        />
                    </view>
                </view>
                <view class="tabbar-text" :style="{ color: indexNav === index ? '#4AB26A' : '' }">
                    {{ item.menu_name }}
                </view>
                <view v-if="item.count" class="red-dot" />
            </view>
        </view>
        <!-- 高度补全 -->
        <!--         <view class="ft-hold"></view>-->
    </view>
</template>

<script>
import { useAppStore } from "@/store/modules/app";

export default {
    name: "TabBar",
    props: {
        bottomMenus: {
            type: Array,
            default() {
                return [];
            }
        },
        // 自定义颜色
        customColor: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            BottomBlackLineHeight: "",
            //   bottomMenus: [
            //     {
            //       wxapp_path: "",
            //       menu_name: "首页",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ueb4f",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "项目",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue60d",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "商城",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue699",
            //     },
            //     {
            //       wxapp_path: "",
            //       menu_name: "我的",
            //       is_needLogin: false,
            //       menu_unselected_icon: "\ue6c2",
            //     },
            //   ], // 底部菜单
            oldIndex: 0 //暂存索引
        };
    },
    computed: {
        indexNav() {
            const appStore = useAppStore();
            return appStore.indexNav;
        }
    },
    created() {
        // 登录后继续跳转之前存取的索引
        this.getMobileInfo();
    },
    unmounted() {
        uni.$off("loginSuccess");
    },
    methods: {
        getMobileInfo() {
            const mobileInfo = uni.getSystemInfoSync();
            let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
            iphoneXArr.forEach(item => {
                if (mobileInfo.model.search(item) !== -1) {
                    this.BottomBlackLineHeight = "50rpx";
                }
            });
        },
        // 导航切换
        tabNav(index, item) {
            const appStore = useAppStore();
            appStore.setIndexNav(index);
        }
    }
};
</script>

<style lang="scss">
$imgWH: 50rpx;
.tabbar-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.4);
}

.tabbar-mask-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;

    .content {
        background-color: #ffffff;
        border-radius: 30rpx 30rpx 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .close {
            font-size: 70rpx;
            color: #999999;
            font-weight: 700;
            transform: rotate(45deg);
            margin-top: 100rpx;
        }
    }

    .show {
        animation: showContent 0.3s both;

        @keyframes showContent {
            0% {
                height: 0;
            }

            100% {
                height: 40vh;
            }
        }
    }

    .hide {
        animation: hideContent 0.3s both;

        @keyframes hideContent {
            0% {
                height: 40vh;
            }

            100% {
                height: 0;
            }
        }
    }
}

.tabbar-panel {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    //height: 120rpx;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    //border-top: 1rpx solid #333;
    background: #ffffff;
    box-shadow: inset 0px 1px 0px 0px rgba(229, 229, 229, 1);
    padding-bottom: 40rpx;

    &.tabbar-panel-dark {
    }

    .tabbar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // padding-bottom: 30rpx;
        color: #333;
        position: relative;

        .red-dot {
            height: 15rpx;
            width: 15rpx;
            top: 14rpx;
            right: 34%;
            border-radius: 50%;
            background-color: red;
            position: absolute;
        }

        .tabbar-img {
            display: flex;
            align-items: center;
            justify-content: center;

            .newShopIcon {
                font-size: 52rpx;
                text-align: center;
            }

            .iconMulti {
                width: 54rpx;
                height: 54rpx;
            }

            .img-box {
                height: 70rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .add {
            background-color: #ffffff;
            transform: translateY(-30%);
            border-radius: 50%;
            width: 110rpx;
            height: 110rpx;
            color: #4ab26a;
            z-index: 10001;

            .newShopIcon {
                font-size: 110rpx;
                width: unset;
                height: unset;
            }
        }

        .tabbar-img-scan {
            width: $imgWH + 10rpx;
            height: $imgWH + 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            image {
                width: $imgWH + 10rpx;
                height: $imgWH + 10rpx;
            }
        }

        .tabbar-text {
            color: #969799;
            font-size: 22rpx;
        }
    }
}

.ft-hold {
    height: $imgWH * 2.8;
}
</style>
